<template>
  <div class="container">
    <!--    头部-->
    <div class="header">
      <van-icon @click="goBack" name="arrow-left" class="header-left" size="30"/>
      填写服务订单
    </div>
    <!--    状态条-->
    <status-bar item="0"/>

    <!-- 陪护师详情   -->
    <van-cell class="cell">
      <!--      左边-->
      <template #title>
        <van-image
            width="25"
            height="25"
            :src="createInfo.service.serviceImg"/>
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <!-- 右边-->
      <template #default>
        <div class="service-text"> 服务内容</div>
      </template>
    </van-cell>
    <!--    医院信息-->
    <van-cell-group class="cell">
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
          <div @click="showHospital=true">
            {{ from.hospital_name || "请选择就诊医院" }}
            <van-icon name="arrow" size="10"/>
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>就诊时间</template>
        <template #default>
          <div @click="showStartTime=true">
            {{ currentDate || "请选择就诊时间" }}
            <van-icon name="arrow" size="10"/>
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>陪诊师</template>
        <template #default>
          <div @click="showCompanion=true">
            {{ companionName || "请选择陪诊师" }}
            <van-icon name="arrow" size="10"/>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field
              class="text"
              input-align="right"
              v-model="from.receiveAddress"
              placeholder="请填写接送地址"/>
        </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field
              class="text"
              input-align="right"
              v-model="from.tel"
              placeholder="请填写联系电话"/>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="服务需求" class="cell">
      <van-field
          class="text"
          style="height: 100px;"
          v-model="from.demand"
          placeholder="请简单秒速你要就诊的科室..."/>
    </van-cell-group>

    <van-button @click="submit" class="submit" type="primary" size="large">
      提交订单
    </van-button>
    <!--    弹出层-->
    <!-- 就诊医院底部弹出 -->
    <van-popup
        v-model:show="showHospital"
        round
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-picker
          :columns="showHospColumns"
          @confirm="showHospConfirm"
          @cancel="showHospital=false"
      />
    </van-popup>

    <!-- 就诊时间底部弹出 -->
    <van-popup
        v-model:show="showStartTime"
        round
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-date-picker
          title="选择日期"
          :min-date="minDate"
          @confirm="showTimeConfirm"
          @cancel="showStartTime=false"
      />
    </van-popup>
    <!--    陪诊师底部弹出-->
    <van-popup
        v-model:show="showCompanion"
        round
        position="bottom"
        :style="{ height: '30%' }"
    >
      <van-picker
          :columns="showCompanionColumns"
          @confirm="showCompanionConfirm"
          @cancel="showCompanion=false"
      />
    </van-popup>
    <!--    支付二维码弹窗-->
    <van-dialog show-confirm-button="false" v-model:show="showPay" >
      <van-icon name="close" class="close" @click="closePay"/>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="PayImg"/>
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>
</template>
<script setup>
// 引入vue
import {onMounted, getCurrentInstance, reactive, ref, computed} from 'vue';
// 引入路由
import {useRouter} from 'vue-router'
// 引入组件
import StatusBar from "../../components/statusBar.vue";
import {showNotify} from "vant";
import Qrcode from "qrcode";
// 获取上下文
const {proxy} = getCurrentInstance();
//
const createInfo = reactive({
  companion: [], // 陪护师信息
  hospitals: [], // 医院信息
  service: {} // 服务信息
})
// 初始化数据
onMounted(async () => {
  // 获取数据
  const {data} = await proxy.$api.h5Companion()
  // 合并数据
  Object.assign(createInfo, data.data)
});

// 获取路由
const router = useRouter()
//点击返回
const goBack = () => {
  router.go(-1)
}
// 就诊医院
// from 信息
const from = reactive({
  hospital_id: 0, // 医院id
  hospital_name: '', // 医院名称
  demand: '', // 备注
  companion_id: 0, // 陪护师id
  receiveAddress: '', // 接送地址
  tel: "", // 联系电话
  starttime: 0, // 服务开始时间
})
// 显示医院
const showHospital = ref(false)
// 医院数据
const showHospColumns = computed(() => {
  return createInfo.hospitals.map(item => {
    return {text: item.name, value: item.id}
  })
})
// 选择医院
const showHospConfirm = (item) => {
  // 赋值
  from.hospital_id = item.selectedOptions[0].value
  from.hospital_name = item.selectedOptions[0].text
  // 关闭
  showHospital.value = false
}
// 就诊时间
const showStartTime = ref(false)
const currentDate = ref()
const minDate = ref(new Date())
// 选择时间
const showTimeConfirm = (item) => {
  // 赋值
  const dateStr = item.selectedValues.join('-')
  currentDate.value = dateStr
  from.starttime = new Date(dateStr).getTime()
  // 关闭
  showStartTime.value = false
}
// 陪诊师信息
const showCompanion = ref(false)
const companionName = ref('')
// 陪诊师数据
const showCompanionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return {text: item.name, value: item.id}
  })
})
// 选择陪诊师
const showCompanionConfirm = (item) => {
  // 赋值
  from.companion_id = item.selectedOptions[0].value
  companionName.value = item.selectedOptions[0].text
  // 关闭
  showCompanion.value = false
}
// 提交
// 支付二维码
const showPay = ref(false)
// 支付二维码
const PayImg = ref()
// 提交
const submit = async () => {
  // 判断是否选择医院
  const params = [
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime'
  ]
  for (const i of params) {
    if (!from[i]) {
      showNotify({message: '请把每一项都填写', type: 'warning'})
      return;
    }
  }
  // 提交
  const {data: orderRes} = await proxy.$api.createOrder(from)
  console.log(orderRes, '订单提交')
  if (orderRes.code === 10000) {
    // 生成二维码
    await Qrcode.toDataURL(orderRes.data.wx_code).then((url) => {
      PayImg.value = url
      showPay.value = true
    })


  }
}
// 关闭支付二维码
const closePay = () => {
  showPay.value = false
  router.push('/order')
}


</script>
<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 16px;

  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;

  ::v-deep(.van-field__control) {
    color: var(--van-cell-calue-color);
  }

  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .server-name {
    margin-left: 10px;
  }

  .service-text {
    background: url() no-repeat center center;
    background-size: 20px;
  }
}

.submit {
  position: absolute;
  bottom: 0;
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
